<!--
 * @Description: 柱图
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2021-11-15 10:49:23
 * @LastEditTime: 2021-12-15 17:18:46
 * @FilePath: \cscec-pms-admin\src\views\construction\constructionSchedule\components\EBar.vue
-->
<template>
  <div
    ref="EBar"
    class="e-bar"
  />
</template>
<script>
export default {
  name: 'EBar',
  props: {
    // 图表选项
    option: {
      type: Object,
      required: true
    },
    // 图表数据加载完成
    ready: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  components: {},
  data() {
    return {
      // 图表实例
      chart: null,
      // 图表配置项
      chartOption: {
        color: ['#1890ff'],
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: '#E5E5E5'
            }
          },
          axisLabel: {
            color: '#666'
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          nameTextStyle: {
            color: '#666666',
            padding: [0, 0, 0, 50]
          },
          axisLine: {
            lineStyle: {
              color: '#E5E5E5'
            }
          },
          axisLabel: {
            color: '#666666'
          },
          splitLine: {
            lineStyle: {
              color: '#E5E5E5',
              type: 'dashed'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [],
        grid: {
          top: '40',
          right: '10',
          bottom: '10',
          left: '10',
          containLabel: true
        }
      }
    }
  },
  watch: {
    ready: {
      handler(v) {
        if (v) {
          this.setChart()
          this.chart.hideLoading()
        } else {
          this.chartLoading()
        }
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    /**
     * @description: 初始化
     * @param {void}
     * @return {void}
     */
    init() {
      this.chart = this.$echarts.init(this.$refs.EBar)
      // 强行resize一次避免宽度bug
      this.resize()
      if (this.ready) {
        this.setChart()
        this.chart.hideLoading()
      } else {
        this.chartLoading()
      }
      addEventListener('resize', this.resize)
    },
    /**
     * @description: 设置图表
     * @param {void}
     * @return {void}
     */
    setChart() {
      // 设置选项
      const { name, nameList, useUnit, data, fun } = this.option
      const option = this.$clone(this.chartOption)
      option.xAxis.data = nameList
      option.yAxis.name = name
      if (useUnit ?? '' !== '') {
        option.yAxis.axisLabel.formatter = '{value}' + useUnit
      } else {
        option.series = data
      }
      const series = data.map((el) => {
        el.label = {
          show: true,
          position: 'top',
          formatter: useUnit ? '{c}' + useUnit : '{c}'
        }
        return el
      })
      option.series = series
      this.chart.setOption(option, true)
      this.chart.on('click', (e) => {
        if (fun) {
          fun(e)
        }
      })
    },
    /**
     * @description: 图表加载中
     * @param {void}
     * @return {void}
     */
    chartLoading() {
      // 设置选项
      this.chart.setOption(this.chartOption, true)
      // 等待加载
      this.chart.showLoading({
        text: '正在加载中...',
        color: '#1890ff',
        textColor: '#333333',
        maskColor: '#ffffff',
        zlevel: 0
      })
    },
    /**
     * @description: 响应屏幕变化
     * @param {void}
     * @return {void}
     */
    resize() {
      const itemr = setTimeout(() => {
        this.chart.resize()
        clearTimeout(itemr)
      }, 300)
    }
  },
  beforeDestroy() {
    // 销毁实例
    this.chart.dispose()
    removeEventListener('resize', this.resize)
  }
}
</script>
<style lang="less" scoped>
.e-bar {
  height: 223px;
  width: 100%;
}
</style>

